<template>
  <Input
    class="epic-input-size"
    v-model="size"
    v-model:value="size"
    type="number"
    min="0"
    placeholder="请输入"
  >
    <template #suffix>
      <Select v-model:value="unit" v-model="unit" style="width: 68px" :options="unitArray" />
    </template>
  </Input>
</template>
<script lang="ts" setup>
  import { pluginManager } from '/@/views/formDesigner/utils';
  import { ref, watch, nextTick } from 'vue';
  import { Select } from 'ant-design-vue';
  const Input = pluginManager.getComponent('input');
  // const Select = pluginManager.getComponent('select');
  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const size = ref<number | null>(null);
  const unit = ref('px');
  const unitArray = [
    { label: 'px', value: 'px' },
    { label: '%', value: '%' },
    // { label: 'vw', value: 'vw' },
    // { label: 'vh', value: 'vh' },
    // { label: 'rem', value: 'rem' },
    // { label: 'em', value: 'em' },
    // { label: 'pt', value: 'pt' },
  ];
  watch(
    () => props.modelValue,
    (e) => {
      const { width, unit: newUnit } = e;
      size.value = width || null;
      unit.value = newUnit || 'px';
    },
    {
      immediate: true,
    },
  );

  watch(
    () => unit.value,
    () => {
      handleUpdate();
    },
  );
  watch(
    () => size.value,
    () => {
      handleUpdate();
    },
  );

  function handleUpdate() {
    nextTick(() => emit('update:modelValue', { width: size.value, unit: unit.value }));
  }
</script>
